Cesium基础

2023-03-26 02:16| 来源: 网络整理| 查看: 265

Cesiumjs作为前端三维渲染的库，肯定少不了模型的加载。在gis领域的应用中，通常是地形+底图+模型的组合方式。

gis应用中，少不了在地形或模型上绘制点、线、面等对象。一般在地形上绘制点，我们需要设置高度模式为：贴地。这样，无论我们设置Z值是多高，点都会贴地形表面显示。而在模型上，由于不是地表，我们需要设置高度模式为：绝对高度。这样，点的位置就是我们设置的绝对Z值位置。

模型上，设置点为贴地效果，绝对向下俯视的视角看，是没问题的。但当视角发生偏移时，点的位置会出现偏移，效果很不好。如下图：我见过很多前端应用，都有类似的问题。

但是，怎么才能判断我绘制的位置是模型还是地形呢？

Cesium提供两种鼠标拾取笛卡尔坐标系的方式：

1、针对地形

//场景相机向指定的鼠标位置（屏幕坐标）发射射线 const ray = viewer.camera.getPickRay(windowPosition); //获取射线与三维球相交的点（即该鼠标位置对应的三维球坐标点，因为模型不属于球面的物体，所以无法捕捉模型表面） const cartesianTerrain = viewer.scene.globe.pick(ray,viewer.scene);

2、针对模型

//根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。 const cartesianModel = viewer.scene.pickPosition(windowPosition);

通过2中的方法原理，可以看出，该方法同样也可以捕获到地形的坐标。因此每次拾取时，只要判断两个方法返回的坐标值是否一样，即可知道是地形表面还是模型表面啦。

export function pickCartesian(viewer:Cesium.Viewer,windowPosition:Cesium.Cartesian2):PickResult{ //根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。 const cartesianModel = viewer.scene.pickPosition(windowPosition); //场景相机向指定的鼠标位置（屏幕坐标）发射射线 const ray = viewer.camera.getPickRay(windowPosition); //获取射线与三维球相交的点（即该鼠标位置对应的三维球坐标点，因为模型不属于球面的物体，所以无法捕捉模型表面） const cartesianTerrain = viewer.scene.globe.pick(ray,viewer.scene); const result = new PickResult(); if(typeof(cartesianModel) !== 'undefined' && typeof(cartesianTerrain) !== 'undefined'){ result.cartesian = cartesianModel || cartesianTerrain; result.CartesianModel = cartesianModel; result.cartesianTerrain = cartesianTerrain as Cesium.Cartesian3; result.windowCoordinates = windowPosition.clone(); //坐标不一致，证明是模型，采用绝对高度。否则是地形，用贴地模式。 result.altitudeMode = cartesianModel.z.toFixed(0) !== cartesianTerrain!.z.toFixed(0) ? Cesium.HeightReference.NONE:Cesium.HeightReference.CLAMP_TO_GROUND; } return result; }

优化后的效果：

【本文地址】

公司简介

联系我们